<template>
	<Menus @proSelect="onSelect" />
	<div class="r-content">
		<Header :title="title"></Header>
		<router-view></router-view>
	</div>
</template>

<script lang="ts" setup>
import Menus from "./Menus.vue"
import Header from "./Header.vue"
import { ref } from "vue"
const title = ref("123")
const onSelect = (v: string) => {
	title.value = v
}
</script>

<style>
.el-menu-vertical-demo:not(.el-menu--collapse) {
	width: 200px;
	height: 100%;
}
.el-menu-vertical-demo {
	height: 100%;
	position: relative;
}
.el-button-auto {
	position: absolute;
	bottom: 20px;
	left: 16px;
	margin: 0;
	z-index: 1;
}
.r-content {
	background-color: #f1f1f1;
	flex: 1;
}
</style>
